<template>
  <div class="login_box_father">
    <div class="login_box_son">
      <el-row>
        <el-col :span="9">&nbsp;</el-col>
        <el-col :span="6">
          <selectCard></selectCard
          ><el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="用户名"
              prop="userName"
              :rules="[{ required: true, message: '用户名不能为空' }]"
            >
              <el-input
                type="userName"
                v-model.number="numberValidateForm.userName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="E-mail"
              prop="email"
              :rules="[
                { required: true, message: '邮箱不能为空' },
                {
                  type: 'email',
                  message: '请输入正确的邮箱地址',
                  trigger: ['blur', 'change']
                }
              ]"
            >
              <el-input
                type="password"
                v-model.number="numberValidateForm.email"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model.number="numberValidateForm.gender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="密码"
              prop="password"
              :rules="[{ required: true, message: '密码不能为空' }]"
            >
              <el-input
                type="password"
                v-model.number="numberValidateForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                v-model="numberValidateForm.checkPass"
                @blur="checkPassword"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('numberValidateForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('numberValidateForm')"
                >重置</el-button
              >
            </el-form-item>
          </el-form></el-col
        >
        <el-col :span="9">&nbsp;</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import selectCard from "@/components/selectCard";
export default {
  name: "HelloWorld",
  data() {
    return {
      numberValidateForm: {
        password: "",
        userName: "",
        email: "",
        gender: "男",
        checkPass: ""
      }
    };
  },
  components: {
    selectCard: selectCard
  },
  methods: {
    submitForm(formName) {
      //$refs获取DOM元素
      //validate方法:DOM对象如果通过了校验规则,则执行validate方法,此方法返回的调用函数callback(valid),可以使用箭头函数获取valid值并且使用
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert(this.numberValidateForm.password+" "+this.numberValidateForm.userName);
          console.log(this.numberValidateForm);

          this.$axios({
            method: "post",
            url: "api",
            data: this.qs.stringify({
              //这里是发送给后台的数据
              userName: this.numberValidateForm.userName,
              gender: this.numberValidateForm.gender,
              email: this.numberValidateForm.email,
              password: this.numberValidateForm.password
            })
          })
            .then(response => {
              //这里使用了ES6的语法
              console.log(response); //请求成功返回的数据
              //设置token
              // var token = response.
              // localStorage.setItem("token", token);
              //this.$router.push({ name: "index" ,params: { activeIndex: "1" }});
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    checkPassword() {
      console.log(this.numberValidateForm.checkPass);
      if (
        this.numberValidateForm.checkPass != this.numberValidateForm.password
      ) {
        alert("请输入相同的密码");
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login_box_father {
  padding-top: 10%;
  padding-left: 0;
  margin: 0;
  height: 100vh;
  background-image: url("./../../static/user.png");
}
</style>
